<!DOCTYPE html>
<html lang="en">
<#header />
<body>
    <div class="layui-fluid" style="padding-top:20px;">
        <div class="layui-row layui-elem-quote" style="margin-left:0px;margin-right:0px;">
            <form class="layui-form layui-form-pane">
                <div class="layui-col-md3">
                    <div class="layui-form-item">
                        <label class="layui-form-label">部门名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="orgDesc" name="orgDesc" placeholder="输入部门名以搜索"  class="layui-input">
                        </div>
                    </div>
                </div>
            </form>
                <div class="layui-col-md2 layui-col-md-offset5">
                     <button id="queryBtn" class="layui-btn" ><i class="layui-icon">&#xe615;</i>搜索</button>
                </div>

        </div>
        <div class="layui-row">
            <div class="layui-btn-group">
                <button id="newBtn" class="layui-btn layui-btn-small">
                    <i class="layui-icon">&#xe654;</i>新增
                </button>
            </div>
        </div>
        <div class="layui-row">
            <table id="deptTB" lay-filter="deptTB">
            </table>
            <script>
                layui.use(["element","form","table","jquery","layer"],function(){
                    var element = layui.element;
                    var form = layui.form;
                    var table = layui.table;
                    var $ = layui.$;
                    var layer = layui.layer;
                    var tableObj = table.render({
                        skin:"row",
                        even:true,
                        size:"sm",
                        loading:true,
                        elem:'#deptTB',
                        height:315,
                        url:'/dept/list.btl',
                        page:true,
                        cols:[[{checkbox:true}
                            ,{field:'id',title:'序号',width:80,sort: true}
                            ,{field:'orgName',title:'部门ID',width:150}
                            ,{field:'orgDesc',title:'部门名称',width:150}
                            ,{field:'createTime',title:'创建日期',width:150}
                            ,{field:'updateTime',title:'更新日期',width:150}
                            ,{fixed:'right',title:'操作',width:295,align:'center',toolbar:'#bar'}]]
                    });

                    table.on('tool(deptTB)',function(obj){
                        var data = obj.data; //获得当前行数据
                        var layEvent = obj.event; //获得 lay-event 对应的值
                        var tr = obj.tr; //获得当前行 tr 的DOM对象

                        if(layEvent === 'detail'){ //查看
                            //do somehing
                            var id = data.id;
                            var index = layer.open({
                                type: 2,
                                title: '部门查看',
                                shadeClose: true,
                                shade: false,
                                maxmin: true, //开启最大化最小化按钮
                                area: ['1000px', '400px'],
                                content: '/dept/view.btl?id='+id,
                                zIndex: layer.zIndex,
                                scrollbar: true,
                            });
                            layer.full(index);
                        } else if(layEvent === 'del'){ //删除
                            layer.confirm('真的删除行么', function(index){
                                $.post("/dept/del.btl",{id:data.id},function(data){

                                })
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                            });
                        } else if(layEvent === 'edit') { //编辑
                            //do something
                            var id = data.id;
                            var index = layer.open({
                                type: 2,
                                title: '更新用户',
                                shadeClose: true,
                                shade: false,
                                maxmin: true, //开启最大化最小化按钮
                                area: ['1000px', '400px'],
                                content: '/dept/update.btl?id='+id,
                                zIndex: layer.zIndex,
                                scrollbar: true,
                            });
                            layer.full(index);
                        } else if(layEvent == 'userFP'){
                            var id = data.id;
                            var index = layer.open({
                                type: 2,
                                title: '分配用户',
                                shadeClose: true,
                                shade: false,
                                maxmin: true, //开启最大化最小化按钮
                                area: ['1000px', '400px'],
                                content: '/dept/orgUser.btl?id='+id,
                                zIndex: layer.zIndex,
                                scrollbar: true,
                            });
                            layer.full(index);
                        } else if(layEvent == 'authFP'){
                            var id = data.id;
                            var index = layer.open({
                                type: 2,
                                title: '分配权限',
                                shadeClose: true,
                                shade: false,
                                maxmin: true, //开启最大化最小化按钮
                                area: ['1000px', '400px'],
                                content: '/dept/orgFuncs.btl?id='+id,
                                zIndex: layer.zIndex,
                                scrollbar: true,
                            });
                            layer.full(index);
                        }
                        });

                        $("#newBtn").on("click", function () {
                            var index = layer.open({
                                type: 2,
                                title: '新增部门',
                                shadeClose: true,
                                shade: false,
                                maxmin: true, //开启最大化最小化按钮
                                area: ['1000px', '400px'],
                                content: '/dept/create.btl',
                                zIndex: layer.zIndex,
                                scrollbar: true,
                                end: function () {
                                    tableObj.reload({});
                                }
                            });
                            layer.full(index);
                        });
                        $("#queryBtn").on("click", function () {
                            tableObj.reload({
                                where:{
                                    orgDesc:$("#orgDesc").val(),
                                }
                            });
                        });

                    });
            </script>

            <script type="text/html" id="bar">
                <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
                <a class="layui-btn layui-btn-normal layui-btn-mini" lay-event="userFP">分配用户</a>
                <a class="layui-btn layui-btn-warm layui-btn-mini" lay-event="authFP">分配权限</a>

            </script>


        </div>

    </div>
</body>
</html>